<template>
    <div>
        <div v-if="isSuccess">
            <a-result status="success" title="提交成功"></a-result>
        </div>
        <div v-else-if="code !== 200">
            <a-result :title="warningMessage"></a-result>
        </div>
        <div style="display: flex;flex-direction: column;align-items: center;margin: 20px;" v-else>
            <h1>自治区审评中心</h1>
            <a-form class="info-confi-form" :form="form" layout="inline" >
                <a-form-item>
                    <template v-slot:label>
                        <span>
                            事项名称
                            <span v-if="isMobile">：</span>
                        </span>
                    </template>
                    {{ infoData.fsxmc }}
                </a-form-item>
                <a-form-item>
                    <template v-slot:label>
                        <span>
                            审评企业
                            <span v-if="isMobile">：</span>
                        </span>
                    </template>
                    {{ infoData.fqymc }}
                </a-form-item>
                <a-form-item>
                    <template v-slot:label>
                        <span>
                            所在地市
                            <span v-if="isMobile">：</span>
                        </span>
                    </template>
                    {{ infoData.fszdq }}
                </a-form-item>
                <a-form-item>
                    <template v-slot:label>
                        <span>
                            详细地址
                            <span v-if="isMobile">：</span>
                        </span>
                    </template>
                    {{ infoData.fqyzszcdz }}
                </a-form-item>
                <a-form-item>
                    <template v-slot:label>
                        <span>
                            审评时间
                            <span v-if="isMobile">：</span>
                        </span>
                    </template>
                    {{ infoData.fcykssj }} 至 {{ infoData.fcyjssj }}
                </a-form-item>
                <a-form-item>
                    <template v-slot:label>
                        <span>
                            <span style="font-size: 16px;color: #fc5531;vertical-align: -3px;line-height: 1;">*</span>
                            <span>
                                是否同意选派
                                <span v-if="isMobile">：</span>
                            </span>
                        </span>
                    </template>
                    <!--v-model:value="row.fsftyxp"  @change="selectAgree" -->
                    <a-radio-group v-model:value="formData.fsftyxp">
                        <a-radio value="同意">
                            同意
                        </a-radio>
                        <a-radio value="不同意">
                            不同意
                        </a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item v-if="formData.fsftyxp == '不同意'" :class="isMobile?'fsftyxp-item':'fty-item'">
                    <template v-slot:label>
                        <span>
                            <span style="font-size: 16px;color: #fc5531;vertical-align: -3px;line-height: 1;">*</span>
                            <span>
                                不同意原因
                                <span v-if="isMobile">：</span>
                            </span>
                        </span>
                    </template>
                    <vxe-textarea 
                        v-model="formData.fbtyyy" 
                        placeholder="请输入不同意原因" 
                        :autosize="{ minRows: 5, maxRows: 10000 }"
                    ></vxe-textarea>
                </a-form-item>
                <a-form-item label="" :wrapper-col="{ span: 12, offset: 8 }">
                    <a-button type="primary" @click="submitClick"> 提交 </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script>
import { queryXpJlWithIdParams, updateXpHcyxx } from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            isMobile:navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
            form: this.$form.createForm(this, { name: 'coordinated' }),
            infoData:{},
            formData:{
                id:this.$route.query.id,
                fbtyyy:'',//原因
                fsftyxp:'同意'//是否同意
            },
            warningMessage:'',
            code:'',
            isSuccess:false,
        }
    },
    watch:{

    },
    mounted(){
        //console.log(navigator.userAgent)
        this.getData()
        
    },
    updated(){
        this.$emit('updatedSuccess')
    },
    methods:{
        getData(){
            queryXpJlWithIdParams({id:this.$route.query.id}).then(res=>{
                if(res.code == 200){
                    this.code = res.code 
                    //console.log(res.result)
                    this.infoData = res.result
                }else{
                    this.code = res.code
                    this.warningMessage = res.message
                }
            })
        },
        //提交
        submitClick(){
            if(this.formData.fsftyxp == '不同意' && !this.formData.fbtyyy){
                this.$message.warning('请输入不同意意见')
                return false
            }else{
                updateXpHcyxx(this.formData).then(res=>{
                    if(res.code == 200){
                        this.isSuccess = true
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        }
    }
}
</script>
<style lang="less">
.info-confi-form{
    display: flex !important;
    flex-direction: column !important;
    .ant-form-item{
        display: flex !important;
        align-content: center !important;
        padding: 10px 0 !important;
        .ant-form-item-label{
            width: 180px !important;
            text-align: right !important;
            font-weight: 500 !important;
            line-height: 1 !important;
        }
        .ant-form-item-control{
            // line-height: 24px !important;
            line-height: 1 !important;
        }
    }
    .fsftyxp-item{
        display: block !important;
        .ant-form-item-label{
            width: 112px !important;
            display: block !important;
        }
    }
    .fty-item{
        display: block !important;
        .ant-form-item-label{
            display: block !important;
        }
        .ant-form-item-control-wrapper{
            width: 100% !important;
        }
    }

}
</style>